import React, { useEffect, useMemo, useState } from 'react';
import { Common } from 'UtilsCommon';
import { useGetDataSourceOptions } from 'UseHooks';
import Base from './base';

const getOptions = (property, view, pageAxis, parentValue) => {
    const { dataSource } = property;

    if (dataSource.length === 0) return property.emptyMessage ? [] : [{}];

    if (property.columnCount > 0) {
        const dataList = [];
        const { columnCount } = property;

        for (let i = 0; i < columnCount; i++) {
            dataList.push({ itemList: [] });
        }

        for (let i = 0; i < dataSource.length; i++) {
            const index = i % columnCount;
            dataList[index].itemList.push(dataSource[i]);
        }

        return dataList;
    }

    return dataSource.map(m => m);
};

const setRowData = (properties, rowData, property, pageAxis, rowProperty) => {
    const list = [];
    properties.forEach(p => {
        if (!Common.isNullOrEmpty(rowData[p.name])) p.value = rowData[p.name];
        p.data = rowData;
        if (p.properties) setRowData(p.properties, rowData, property, pageAxis, rowProperty);
        if (property.expendSetData) pageAxis.getFunction(property.expendSetData)({ property, rowProperty, p, rowData });
    });
    return list;
};

const renderItem2 = (m, i, count, property, pageId, pageAxis) => {
    if (Common.isEmptyObject(m)) {
        if (property.properties.length > 1) {
            const p1 = Common.clone(property.properties[1]);
            return Base.getPropertyItem(p1, property, pageId);
        }
        return null;
    }
    const p = Common.clone(property.properties[0]);
    p.id = Common.createGuid();
    p.key = i;
    p.entityData = m;
    if (!Common.isNullOrEmpty(m[p.name])) p.value = m[p.name];
    if (p.properties) setRowData(p.properties, m, property, pageAxis, p);
    if (p.style && p.style.borderBottom && property.isBottomLine && i === count - 1) {
        delete p.style.borderBottom;
    }
    if (p.linkUrl) {
        p.linkUrl = Common.replaceDataContent(m, p.linkUrl, true);
    }
    return Base.getPropertyItem(p, property, pageId);
};

const renderItem = (data, index, count, property, pageId, pageAxis) => {
    if (data.itemList) {
        return <div key={index} style={property.columnItemStyle}>
            {data.itemList.map((m, i) => renderItem2(m, i, data.itemList.length, property, pageId, pageAxis))}
        </div>;
    }
    return renderItem2(data, index, count, property, pageId, pageAxis);
};

export default (props) => {
    const { property, pageAxis, view, pageId } = Base.getProps(props);

    const [options, setOptions] = useGetDataSourceOptions(property, view, pageAxis, getOptions, property.id);
    const [isVisible, setIsVisible] = useState(property.isVisible !== false);

    useMemo(() => {
        if (property.value) property.dataSource = property.value;
    }, [property]);

    useEffect(() => {
        if (property.dataSourceChange) property.dataSourceChange(property.dataSource, property);
    }, [property.dataSource]);

    property.setIsVisible = (v) => { property.isVisible = v; setIsVisible(v); };
    property.setValue = (v) => {
        property.dataSource = v;
        setOptions(getOptions(property, view, pageAxis));
    };
    property.refreshOptions = () => setOptions(getOptions(property, view, pageAxis));

    if (!isVisible || (property.isValueVisible && (!property.dataSource || property.dataSource.length === 0))) return null;

    const { style } = property;
    return (
        <div style={Base.setStyle(style)}>
            {property.label && <div style={property.labelStyle}>{property.label}</div>}
            {options.map((m, i) => renderItem(m, i, options.length, property, pageId, pageAxis))}
            {property.emptyMessage && options.length === 0 && <div style={property.emptyMessageStyle}>{property.emptyMessage}</div>}
        </div>
    );
};